<template>
  <div style="width: 300px;height: 300px;margin: 20px 20px;text-align: center;display: block;border: 1px solid #dedede;">
    <!-- 已绑定 -->
    <template v-if="!bindWxData.bind">
    <div v-if="bindWxData.isbind == 'Y'" style="text-align: center;margin-top: 110px;">
      <div style="margin-bottom: 0px;font-size: 1rem;margin-bottom: 10px;">{{t('账号已绑定')}}</div>
<!--      <div style="margin-bottom: 10px;font-size: 0.8rem;color: #929090;">绑定微信用户：123</div>-->
      <Button @click="cancelBind" color="primary">{{t('点击解绑')}}</Button>
    </div>
    <!-- 未绑定 -->
    <div v-if="bindWxData.isbind == 'N'" style="text-align: center;margin-top: 110px;">
      <div style="margin-bottom: 10px;">{{t('账号未绑定微信')}}</div>
      <Button @click="wxLogin" color="primary">{{t('点击绑定')}}</Button>
    </div>
    </template >
    <template v-else>
      <div class="qrCode" id="qrCode"></div>

    </template>
  </div>
  <template v-if="bindWxData.bind">
    <div style="margin-top: 0px;text-align: center;">
      {{t('使用微信扫一扫绑定')}}
    </div>
  </template>
</template>
<script setup>
import {useStore} from "store";
import {ajax} from 'framework'
import {reactive, ref,nextTick} from 'vue'
import {message} from 'heyui'
import {useI18n} from "i18n";
const store = useStore()
const {t}=useI18n({
  en:{
    "点击绑定":"Click to bind",
    "点击解绑":"Click to unbind",
    "账号已绑定":"Account already bound",
    "账号未绑定微信":"Account not bound to WeChat",
    "操作成功":"Operation successful",
    "微信已绑定其他用户，不可重复绑定":"WeChat has already bound another user and cannot be bound again",
    "使用微信扫一扫绑定":"Use WeChat to scan and bind"
  },
  zh:{
    "Bind WeChat":"微信绑定",
  }
})
import 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
//事件
//Props Open方法传入的参数
const {params, dialog} = defineProps({
  params: Object,
  dialog: Object
})
//dialog.cancel() 方法可以直接关闭对话框
const WxLogin= window.WxLogin;
const bindWxData = ref({
  isbind:"N",
  bind:false,
})
bindWx()
function bindWx(){
  dialog.loading(true)
  ajax.post("WXLogin/isbind", {}).then(r => {
    bindWxData.value.isbind = r.data.isbind
    if (r.data.isbind == 'N'){
      //wxLogin()
    }
    dialog.loading(false)
  })
}
function cancelBind(){
  dialog.loading(true)
  ajax.post("WXLogin/unbind", {}).then(r => {
    bindWxData.value.isbind = 'N'
    bindWxData.value.bind = false
    message(t("操作成功"))
    dialog.loading(false)
  })
}
function wxLogin() {
  bindWxData.value.bind =true
  nextTick(()=>{
    new WxLogin({
      id:"qrCode",
      appid: window._configs["WxOpenConfig.APP_ID"],//"wxd7d3c9368afef5f0",
      scope: "snsapi_login",//"snsapi_login",
      redirect_uri: window.location.origin+"/WXLogin/bindWx/"+store.user.id,//"http://zqpz7d.natappfree.cc/WXLogin/userInfo",
      state: "1223",
      self_redirect:true,
      style: "black",
      href: "",
      stylelite:1,
    });
  })
}
addEventListener("bindErr",e=>{
  message(t("微信已绑定其他用户，不可重复绑定"))
  bindWxData.value.isbind = 'N'
  bindWxData.value.bind = false
})
addEventListener("bindWxSuccess",e=>{
  message(t("操作成功"))
  bindWxData.value.isbind = 'Y'
  bindWxData.value.bind = false
})
</script>
<style lang="less" scoped>
.qrCode {
  margin-top: 68px;
}
</style>